<template>
  <div>
    <!-- 头部 -->
    <div class="search">
      <a-form style="padding-top: 20px" :model="form" :hideRequiredMark="true" :label-col="labelCol">
        <a-row>
          <a-col :span="10" :lg="10" :xs="24" :md="10">
            <a-form-item label="认证状态">
              <a-row style="align-items: center">
                <a-col
                  :span="5"
                  v-for="(item, index) in statusList"
                  :offset="index == 0 ? 1 : ''"
                  :class="index == statusAct ? 'act-font-color' : ''"
                  @click="chooseStatus(item.status, index)"
                  :key="item.status"
                  >{{ item.title }}</a-col
                >
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="12" :md="6">
            <a-form-item>
              <a-range-picker v-model:value="time" style="width: 100%" show-time format="YYYY/MM/DD HH:mm:ss" @change="panelChange" />
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1" :lg="4" :xs="10" :md="4">
            <a-form-item name="keyword" label="">
              <a-input v-model:value="form.keyword" placeholder="请输入搜索内容"></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="4" :offset="1" :lg="4" :xs="10" :md="4">
            <a-form-item name="saleValue" label="提现类型">
              <a-select ref="select" v-model:value="form.type" placeholder="请选择">
                <a-select-option v-for="item in buyCar2" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-form-item name="saleValue" label="提现方式" style="margin-left: 40px">
            <a-select ref="select" v-model:value="form.withdrawalType" placeholder="请选择">
              <a-select-option v-for="item in buyCar3" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-col :span="2" :offset="1"><a-button type="primary" @click="search" class="d-a-center">搜索</a-button></a-col>
        </a-row>
      </a-form>
    </div>
    <div class="global-button">
      <a-button style="margin-bottom: 20px" type="primary" @click="excleData()" class="d-a-center">导出</a-button>
      <!-- <a-button style="margin-bottom: 20px" type="primary" @click="openNotification()" class="d-a-center">通知 </a-button> -->
    </div>

    <!-- 列表 -->
    <a-table
      rowKey="id"
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :scroll="{ y: 540, x: 'auto' }"
    >
      <template #withdrawalType="{ record }">
        {{ withdrawal_type(record.withdrawalType) }}
      </template>
      <template #updatedAt="{ record }">
        {{ record.status == 2 ? record.updatedAt : '未到账' }}
      </template>
      <template #status="{ record }">
        <a-tag :color="orderListStatusColor(record.status)">{{ orderListStatus(record.status) }}</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button type="link" v-has="{ a: $route, b: 1 }" @click="look(record, record.withdrawalType)">查看</a-button>
        <a-button type="link" @click="deal(record, record.withdrawalType)" v-if="record.status == 1" v-has="{ a: $route, b: 2 }"
          >审核</a-button
        >
        <a-button type="link" @click="payment(record, record.withdrawalType)" v-if="record.status == 4" v-has="{ a: $route, b: 2 }"
          >打款</a-button
        >
        <a-button
          type="link"
          @click="down(record)"
          v-if="record.taxPaymentReceipt && record.status == 2 && record.withdrawalType == 2"
          v-has="{ a: $route, b: 2 }"
          >下载凭证</a-button
        >
        <a-button
          type="link"
          @click="Invoicing(record)"
          v-if="!record.taxPaymentReceipt && record.status == 2 && record.withdrawalType == 2"
          v-has="{ a: $route, b: 2 }"
          >确认开票</a-button
        >
      </template>
    </a-table>

    <!-- 审核弹窗 -->
    <div>
      <a-modal width="50%" v-model:visible="visible" title="提现详情" :footer="null">
        <block v-if="form.type == 0">
          <!-- 提现护士信息 -->
          <div class="action-nav">
            <div>真实姓名： {{ detail.realName }}</div>
            <div>护士ID： {{ detail.nurseId }}</div>
            <div>
              提现账号：<a-tag color="cyan">{{ detail.payeeAccount }}</a-tag>
            </div>
          </div>

          <!-- 审核订单列表 -->
          <a-table :columns="actionColumnsDetail" :data-source="detailList" bordered :loading="loading" :scroll="{ y: 540, x: 'auto' }">
            <template #updatedAt="{ record }">
              {{ record.status == 2 ? record.updatedAt : '未到账' }}
            </template>
          </a-table>
          <a-divider></a-divider>
          <a-row>
            <template v-if="isEdit == 1">
              <a-col :span="4" :offset="8">
                <a-button type="danger" @click="rejectDialog(null)" class="d-a-center">拒绝</a-button>
              </a-col>
              <a-col :span="4" :offset="1">
                <a-button type="primary" @click="pass" class="d-a-center">通过</a-button>
              </a-col>
            </template>
            <a-col :span="3" :offset="12" v-if="isEdit == 0">
              <a-button type="info" @click="closeModal" class="d-a-center">关闭</a-button>
            </a-col>
          </a-row>
        </block>
        <block v-else>
          <a-form :label-col="labelCol">
            <a-form-item label="提现单号">{{ obj.number }}</a-form-item>
            <a-form-item label="真实姓名">{{ obj.realName }}</a-form-item>
            <a-form-item label="护士ID">{{ obj.nurseId }}</a-form-item>
            <a-form-item label="提现账号">
              <a-tag color="cyan">{{ obj.payeeAccount }}</a-tag>
            </a-form-item>
            <a-form-item label="提现金额">{{ obj.price }}</a-form-item>
            <a-form-item label="申请时间">{{ obj.createdAt }}</a-form-item>
            <a-form-item label="到账时间" v-if="obj.status == 2">{{ obj.updatedAt }}</a-form-item>
            <a-form-item label="审核状态">{{ orderListStatus(obj.status) }}</a-form-item>
            <a-form-item label="拒绝原因" v-if="obj.status == 3">{{ obj.recordInfo }}</a-form-item>
          </a-form>
        </block>
      </a-modal>
    </div>
    <!-- 拒绝审核-->
    <a-modal
      :destroyOnClose="true"
      v-model:visible="rejectVisible"
      title="原因填写"
      @cancel="handleCancel"
      @ok="handleOk"
      ok-text="提交"
      :closable="true"
      :confirm-loading="rejectLoading"
    >
      <a-form ref="reasonRef" :model="reasonForm" :rules="rules">
        <a-form-item label="主述" name="value">
          <a-textarea v-model:value="reasonForm.value"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>

    <!--  -->
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs, h } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, notification, message, Button } from 'ant-design-vue'
import { deleteObjBlank } from '@/assets/js/common.js'
import {
  selectAllWalletRecordsSocialWorker,
  selectWalletRecordsSocialWorkerInfo,
  selectRecordById,
  manageWalletRecordsSocialWorker,
  selectAllWalletRecordsSocialWorkerExport,
  secondaryProcessingWithdrawals,
  workerConfirmPaymentAndInvoice,
  workerDownloadInvoices,
  workerConfirmInvoice,
  skipBankCards
} from '@/api/buisness/index'
// import inputModal from '@/components/common/inputModal.vue'
import { useModal, useSelects } from '@/hooks'

export default {
  // components: {
  //   inputModal
  // },
  setup() {
    const form = reactive({
      type: 0
    })
    const reasonRef = ref('')
    const reasonForm = reactive({
      value: ''
    })

    const rules = {
      value: [
        {
          required: true,
          message: '请填写原因!',
          trigger: 'blur'
        }
      ]
    }
    const data = reactive({
      rejectLoading: false,
      hasEmail: false,
      errorId: null,
      loading: true,
      list: [],
      detailList: [],
      detail: {
        realName: '',
        payeeAccount: '',
        nurseId: ''
      },
      time: [],
      selectItem: {},
      id: '', //提现详情ID
      number: '', //订单编号
      obj: {}, //提现详情
      isEdit: 0,
      visible: false,
      statusAct: 0,
      rejectVisible: false,
      buyCar2: [
        {
          name: '个人',
          id: 0
        },
        {
          name: '机构',
          id: 1
        }
      ],
      buyCar3: [
        {
          name: '微信',
          id: 1
        },
        {
          name: '银行卡',
          id: 2
        }
      ],
      withdrawalType: 0
    })
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })

    const { renderData: selectsRenderData, rowSelection } = useSelects({
      isFree: true
    })
    // 监听renderData的变化
    watch(
      () => data.list,
      (newVal, oldVal) => {
        console.log('renderData changed========:', newVal)
        // 这里调用你的函数
        // yourFunction();
        let arr = newVal.map(item => {
          return item.id
        })
        rowSelection.changePageId(arr)
      },
      {
        deep: true // 如果需要深度监听数组内部对象的变化，请设置deep为true
      }
    )
    const payment = (record, withdrawalType) => {
      const { closeModal } = useModal.confirm({
        title: `确认打款`,
        icon: createVNode(ExclamationCircleOutlined),
        cancelText: '拒绝',
        onOk() {
          let obj = {
            businessNos: [record.number],
            walletRecordId: record.id
          }
          workerConfirmPaymentAndInvoice(obj).then(res => {
            init()
            closeModal()
          })
        },
        onCancel() {
          data.withdrawalType = withdrawalType
          data.id = record.id
          rejectDialog(null)
        }
      })
    }

    const Invoicing = (record, withdrawalType) => {
      const { closeModal } = useModal.confirm({
        title: `确认开票`,
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          let obj = {
            businessNos: [record.number],
            walletRecordId: record.id
          }
          workerConfirmInvoice(obj).then(res => {
            init()
            closeModal()
          })
        }
      })
    }
    const down = record => {
      let obj = {
        businessNos: [record.number],
        walletRecordId: record.id
      }
      workerDownloadInvoices({ ...obj }).then(res => {
        let link = document.createElement('a')
        //创建一个a标签
        link.style.display = 'none'
        //将a标签隐藏
        link.href = res.object[0].pdf
        console.log(res.object)
        //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
        link.setAttribute('download', '订单')
        // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
        document.body.appendChild(link)
        //将上面创建的a标签加入到body的尾部
        link.click()
      })
    }
    const openNotification = id => {
      return new Promise((resolve, reject) => {
        const { closeModal } = useModal.confirm({
          title: '提示',
          content: '是否通过邮箱核对信息进行打款',
          onCancel() {
            console.log('=======')
            rejectDialog(id)
          },
          onOk() {
            /*
							删除图片操作
							*/
            let obj = {
              status: 2,
              id: id,
              type: form.type,
              withdrawalType: data.withdrawalType,
              mailbox: data.hasEmail
            }
            secondaryProcessingWithdrawals(obj).then(res => {
              if (res.success) {
                data.rejectVisible = false
                data.visible = false
                notification.close(key)
                init()

                message.success(`执行成功`)
              }
              closeModal()
            })
          }
        })
      })
      // const key = `open${Date.now()}`
      // console.log('key', key)
      // notification.open({
      //   message: '提示',
      //   description: '是否通过邮箱核对信息进行打款',
      //   duration: null,
      //   btn: () =>
      //     h('div', [
      //       h(
      //         Button,
      //         {
      //           size: 'small',
      //           type: 'primary',
      //           style: 'margin-right:15px',
      //           onClick: () => {
      //             rejectDialog(id)
      //             notification.close(key)
      //           }
      //         },
      //         '取消'
      //       ),
      //       h(
      //         Button,
      //         {
      //           size: 'small',
      //           type: 'primary',
      //           onClick: () => {
      //             let obj = {
      //               status: 2,
      //               id: id,
      //               type: form.type,
      //               withdrawalType: data.withdrawalType,
      //               mailbox: data.hasEmail
      //             }
      //             secondaryProcessingWithdrawals(obj).then(res => {
      //               if (res.success) {
      //                 data.rejectVisible = false
      //                 data.visible = false
      //                 notification.close(key)
      //                 init()

      //                 message.success(`执行成功`)
      //               }
      //             })
      //           }
      //         },

      //         '确定'
      //       )
      //     ]),

      //   key,
      //   onClose: close
      // })
    }

    // 状态列表
    const statusList = reactive([
      {
        title: '全部',
        status: 0
      },
      {
        title: '待审核',
        status: 1
      },
      {
        title: '已提现',
        status: 2
      },
      {
        title: '未通过',
        status: 3
      }
    ])
    const excleData = () => {
      let num = 0
      if (!rowSelection.selectStatus) {
        num = rowSelection.selectedRowKeys.length
        if (rowSelection.selectedRowKeys.length == 0) {
          message.warning('请选择你要导出的订单')
          return
        }
      } else {
        num = page.total - rowSelection.reverseSelection.length
        if (rowSelection.reverseSelection.length == page.total) {
          message.warning('请选择你要导出的订单')
          return
        }
      }

      const { closeModal } = useModal.confirm({
        title: `确认导出当前${num}条数据吗?`,
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          //根据搜索条件导出
          let obj = {
            ...form,
            ids: rowSelection.selectStatus ? rowSelection.reverseSelection : rowSelection.selectedRowKeys,
            selectionMode: rowSelection.selectStatus ? 0 : 1
          }
          selectAllWalletRecordsSocialWorkerExport({ ...obj }).then(res => {
            let link = document.createElement('a')
            //创建一个a标签
            link.style.display = 'none'
            //将a标签隐藏
            link.href = res.object
            console.log(res.object)
            //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
            link.setAttribute('download', '订单')
            // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
            document.body.appendChild(link)
            //将上面创建的a标签加入到body的尾部
            link.click()
            closeModal()
          })
        }
      })
    }
    // 选择时间
    const panelChange = (date, dateString) => {
      console.log('选择的时间是', dateString)
      form.startTime = dateString[0]
      form.endTime = dateString[1]
    }
    const orderListStatusColor = computed(status => {
      return function (status) {
        if (status == 2) {
          return 'success'
        }
        if (status == 1) {
          return '#f50'
        }
        if (status == 3) {
          return 'error'
        }
      }
    })
    const withdrawal_type = state => {
      let map = {
        0: '支付宝',
        1: '微信',
        2: '银行卡'
      }
      return map[state] ? map[state] : state
    }
    const orderListStatus = status => {
      let title = ''
      switch (status) {
        case 1:
          title = '待审核'
          break
        case 2:
          title = '已提现'
          break
        case 3:
          title = '未通过'
          break
      }
      return title
    }

    // 查询
    const search = () => {
      if (Object.keys(form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      page.current = 1
      init()
    }
    // 审核和查看表格数组
    const actionColumns = [
      {
        title: '提现单号',
        dataIndex: 'number',
        className: 'table',
        align: 'center'
      },
      {
        title: '订单号',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '申请时间',
        dataIndex: 'nurseId',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务名称',
        dataIndex: 'payeeAccount',
        className: 'table',
        align: 'center'
      },
      {
        title: '订单价格',
        dataIndex: 'price',
        className: 'table',
        align: 'center'
      },
      {
        title: '护士佣金',
        dataIndex: 'updatedAt',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'updatedAt'
        }
      },
      {
        title: '审核状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]
    // 审核和查看表格数组详情
    const actionColumnsDetail = [
      // {
      //   title: '提现单号',
      //   dataIndex: 'dealNumber',
      //   className: 'table',
      //   align: 'center'
      // },
      {
        title: '用户名称',
        dataIndex: 'userName',
        className: 'table',
        align: 'center'
      },
      {
        title: '申请时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务名称',
        dataIndex: 'serviceName',
        className: 'table',
        align: 'center'
      },
      {
        title: '护士佣金',
        dataIndex: 'ordersPrice',
        className: 'table',
        align: 'center'
      },
      {
        title: '审核时间',
        dataIndex: 'updatedAt',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'updatedAt'
        }
      }
    ]
    const columns = [
      {
        title: '提现单号',
        dataIndex: 'number',
        className: 'table',
        align: 'center'
      },

      {
        title: '真实姓名',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      // {
      //   title: '护士ID',
      //   dataIndex: 'nurseId',
      //   className: 'table',
      //   align: 'center'
      // },
      {
        title: '提现账号',
        dataIndex: 'payeeAccount',
        className: 'table',
        align: 'center'
      },
      {
        title: '提现渠道',
        dataIndex: 'withdrawalType',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'withdrawalType'
        }
      },
      {
        title: '提现金额',
        dataIndex: 'price',
        className: 'table',
        align: 'center'
      },

      {
        title: '申请时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center',
        sort: true
      },
      {
        title: '到账时间',
        dataIndex: 'updatedAt',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'updatedAt'
        }
      },
      {
        title: '提现状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },

      {
        title: '拒绝原因',
        dataIndex: 'recordInfo',
        className: 'table',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    const chooseStatus = (status, index) => {
      if (data.statusAct == index) return
      data.statusAct = index
      if (index == 0) {
        delete form['status']
      } else {
        form.status = status
      }
      page.current = 1
      init()
    }
    const handleCancel = () => {
      reasonForm.value = ''
      data.errorId = null
    }
    const handleOk = e => {
      if (data.errorId) {
        let obj = {
          status: 3,
          id: data.errorId,
          type: form.type,
          withdrawalType: data.withdrawalType,
          recordInfo: reasonForm.value,
          mailbox: data.hasEmail
        }
        reasonRef.value.validate().then(async () => {
          data.rejectLoading = true

          secondaryProcessingWithdrawals(obj)
            .then(res => {
              if (res.success) {
                handleCancel()
                data.rejectVisible = false
                data.visible = false
                data.errorId = null
                init()
                message.success(`执行成功`)
              }
            })
            .finally(err => {
              data.rejectLoading = false
            })
        })
      } else {
        let obj = {
          recordInfo: reasonForm.value,
          status: 3,
          id: data.id,
          type: form.type,
          withdrawalType: data.withdrawalType
        }
        console.log('123', obj)
        reasonRef.value
          .validate()
          .then(async () => {
            data.rejectLoading = true

            let res = await manageWalletRecordsSocialWorker(obj)
            if (res.success) {
              data.rejectVisible = false
              data.visible = false
              message.success(`执行成功`)
              data.rejectLoading = false

              init()
              if (data.withdrawalType == 2) {
                doSkipBankCards()
              }
            }
          })
          .finally(err => {
            data.rejectLoading = false
          })
      }
    }
    const doSkipBankCards = () => {
      const { closeModal } = useModal.confirm({
        title: '该笔钱护士是否跳过银行卡提现? ',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          let obj = {
            nurseId: data.selectItem.nurseId
          }
          let res = await skipBankCards(obj)
          if (res.success) {
            message.success(`执行成功`)
            init()
          }
          closeModal()
        }
      })
    }
    const closeModal = () => {
      data.visible = false
    }
    const rejectDialog = (id = null) => {
      data.errorId = id
      console.log('错误', id)
      data.rejectVisible = true
    }
    const pass = () => {
      const { closeModal } = useModal.confirm({
        title: '确认通过此提现申请吗？',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          let obj = {
            withdrawalType: data.withdrawalType,
            status: 2,
            id: data.id,
            type: form.type
          }
          let res = await manageWalletRecordsSocialWorker(obj)
          if (res.success) {
            data.visible = false
            message.success(`执行成功`)

            init()
            closeModal()
          } else {
            console.log('====12321312', res)

            if (res.object) {
              closeModal()
              data.hasEmail = res.object
              openNotification(data.id)
              console.log('12321312', res.object)

              return
            }
            console.log(res)
            message.error(res.object)
          }
        }
      })
    }

    // 查看
    const look = (item, withdrawalType) => {
      data.withdrawalType = withdrawalType
      data.id = item.id

      data.isEdit = 0
      data.visible = true
      data.number = item.number
      data.selectItem = item

      if (form.type == 1) {
        initOrgDetail(data.id)
      } else {
        initDetail(data.id)
      }
    }
    // 查看
    const lookOrder = (number, id) => {
      data.isEdit = 0
      data.visible = true
      data.id = id
      data.number = number
      if (form.type == 1) {
        initOrgDetail(id)
      } else {
        initDetail(id)
      }
    }

    // 审核
    const deal = (item, withdrawalType) => {
      data.withdrawalType = withdrawalType
      data.isEdit = 1
      data.visible = true
      data.id = item.id
      data.number = item.number
      data.selectItem = item
      initDetail(data.id)
    }
    init()
    async function init() {
      data.loading = true
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form
      }
      let res = await selectAllWalletRecordsSocialWorker(obj)
      if (res.success) {
        res.object.records.map(el => (el.key = el.id))
        data.list = res.object.records
        page.total = res.object.total
        data.loading = false
      } else {
        data.loading = false
      }
    }

    async function initOrgDetail(id) {
      let res = await selectRecordById(id)
      if (res.success) {
        data.obj = res.object
      }
    }
    async function initDetail(id) {
      if (form.type == 0) {
        let res = await selectWalletRecordsSocialWorkerInfo(id)
        if (res.success) {
          data.obj = res.object
          data.detailList = res.object
          data.detail.realName = data.detailList[0].realName
          data.detail.nurseId = data.detailList[0].nurseId
          data.detail.payeeAccount = data.selectItem.payeeAccount
          console.log('data.detailList', data.detailList)
        }
      } else {
        let res = await selectRecordById(id)
        if (res.success) {
          data.obj = res.object
        }
      }
    }
    return {
      ...toRefs(data),
      form,
      actionColumns,
      actionColumnsDetail,
      columns,
      pagination,
      statusList,
      handleTableChange,
      search,
      deal,
      look,
      lookOrder,
      panelChange,
      chooseStatus,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      handleOk,
      handleCancel,
      closeModal,
      rules,
      reasonRef,
      reasonForm,
      rejectDialog,
      pass,
      orderListStatus,
      orderListStatusColor,
      withdrawal_type,
      rowSelection,
      excleData,
      openNotification,
      payment,
      down,
      Invoicing
    }
  },

  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined
  }
}
</script>

<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}

.action-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-bottom: 15px;
}
</style>
